<template>
	<a-drawer
		:visible="self_visible"
		v-bind="$attrs"
		:title="title"
		:placement="placement"
		:mask-closable="closeable"
		class="basic-drawer"
		:width="width"
		:header="header"
		:footer="footer"
		:ok-text="okText"
		:cancel-text="cancelText"
		:ok-loading="loading"
		unmount-on-close
		@ok="handleOk"
		@cancel="handleCancel"
		@open="handleOpen"
		@close="handleClose"
	>
		<template #title> {{ title }} </template>
		<template #header>
			<slot name="header"></slot>
		</template>
		<slot></slot>
		<template #footer>
			<slot name="footer"></slot>
		</template>
	</a-drawer>
</template>
<script lang="ts" setup>
interface IProps {
	visible?: boolean;
	loading?: boolean;
	width?: string | number;
	title?: string;
	placement?: "top" | "bottom" | "left" | "right";
	closeable?: boolean;
	okText?: string;
	cancelText?: string;
	header?: boolean;
	footer?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
	visible: false,
	loading: false,
	title: "",
	width: 720,
	placement: "right",
	closeable: true,
	okText: "确定",
	cancelText: "取消",
	header: true,
	footer: true
});
interface IEmits {
	(event: "update:modelValue", value: boolean): void;
	(event: "update:visible", value: boolean): void;
	(event: "update:loading", value: boolean): void;
	(event: "ok"): void;
	(event: "cancel"): void;
	(event: "open"): void;
	(event: "close"): void;
}
const emit = defineEmits<IEmits>();
// 子组件定义自己的visible
const self_visible = computed({
	get: () => props.visible,
	set: value => {
		emit("update:modelValue", value);
	}
});
const drawerEl = ref();
const handleOk = () => {
	try {
		emit("update:loading", true);
		emit("ok");
		emit("update:visible", false);
	} finally {
		emit("update:loading", false);
		drawerEl.value.style.overflow = "hidden";
	}
};
const handleCancel = () => {
	emit("cancel");
	emit("update:visible", false);
	drawerEl.value.style.overflow = "";
};
const handleOpen = () => {
	emit("open");
	//防止模态框弹出时页面滚动的方法
	drawerEl.value = document.querySelector("#domain-services");
	drawerEl.value.style.overflow = "hidden";
};
const handleClose = () => {
	emit("close");
	drawerEl.value.style.overflow = "";
};
</script>

<style lang="less" scoped></style>
